<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>搜索测试</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="jquery-2.1.4.min.js"></script>
	</head>
	<style type="text/css">
		.tips {
    padding-right: 20px;
    color: red;
}

.key{
font-weight:bold
}
.myhidden{
display:none;

}
	</style>
	<body>
		<center>
		<form action="searchresult.php" id='myserach' method="get">
			<div class="mui-input-row mui-search">
				<label>关键词:</label><input type="search" name="keyword" id="keyword" class="mui-input-clear" placeholder=""><br/>
				<input class="myhidden" type="text" name="id_customer" id="id_customer">
				<input class="myhidden" type="text" name="page" value='1' >
				<input class="myhidden" type="text" name="category" value='0'>
				<input class="myhidden" type="text" name="sort" value='new_down' >
			</div>
			<button type="submit" >搜索</button>
		</form>
		
		
		<h2>搜索结果</h2>
		<div id="content">
			<p><span class="tips">推荐搜索词:</span>
			<span id="hotkeyword">
			
			</span>
			</p>
			<p><span class="tips">分类页面匹配:</span>
				<span id="category">
					
				</span>
			</p>
			<p><span class="tips">CMS页面匹配:</span>
				<span id="cms">
				
				</span>
			</p>
			</p>
			<p><span class="tips">tag页面匹配:</span><span id="tag"></span></p>
			<p><span class="tips">产品页面匹配:</span><span id="product"></span></p>
		</div>
		</center>
		<script type="text/javascript">
			var host  =  "http://www.uni.com/";
			//给 input绑定输入监听事件
			$('#keyword').bind('input propertychange', function() {  
			
				console.log($(this).val());
				if($(this).val().length >2){
				search_ajax();
				
				}else{
					//清空当前搜索记录
					$('#hotkeyword').html('');
					$('#category').html('');	
					$('#cms').html('');
					$('#tag').html('');
					$('#product').html('');
	
				}
				
			
			}); 
			
			
			//3个字符 才开始匹配
			function search_ajax(){
				var key= $('#keyword').val();
				var id_customer = $('#id_customer').val();
				$.post("/api/search/search_ajax.html",{key:key,id_customer:id_customer},function(res){
					
					var obj = $.parseJSON(res);
					 
					//[] 括起来的 json 转换后 需要使用 [0] 数组索引调用 {} 则正常的对象调用 .即可
					//解析热搜词
					
					if(obj.hotkeyword !='[]'){
							var hotkeyword  =$.parseJSON(obj.hotkeyword);
							
							if(hotkeyword.type == 'hot'){
							
								var hotkeyword =hotkeyword.res[0].association.split(',');  //拆分热搜词association
								
								var string =  '<br>';//拼接热搜词
					
								$.each(hotkeyword,function(index,value,array){
									
									string += '人工添加词匹配：' +value + '<br>';
								});
								$("#hotkeyword").html(string);

							}
								
							if(hotkeyword.type == 'asc'){
								var string  = '<br>';
								$.each(hotkeyword.res,function(index,value,array){
									
									string += '正向匹配:' +value + '<br>';
	
								});
								
								$("#hotkeyword").html(string);
							
							}
							
							if(hotkeyword.type == 'desc'){
								var string  = '<br>';
								$.each(hotkeyword.res,function(index,value,array){
									
									string += '反向匹配:' +value + '<br>';
								});
								$("#hotkeyword").html(string);
							
							
							}
							
							
							if(hotkeyword.type == 'similar'){
								var string  = '<br>';
								$.each(hotkeyword.res,function(index,value,array){
									
									string += '相似匹配:' +value + '<br>';
								});
								$("#hotkeyword").html(string);
							
							
							}
							
							if(hotkeyword.type == 'empty'){
							
								$("#hotkeyword").html( '关键词：'+hotkeyword.res +'无搜索结果');
							}
							
							
							
					}else{
						$("#hotkeyword").html('无结果');
					}
					
					//分类页面匹配
					if(obj.category !='[]'){
						var category  =$.parseJSON(obj.category);
						var string =  '';
					
						$.each(category,function(index,objitem,array){
				
							var re =new RegExp( key ,"gi"); //自定义变量正则	
							var name =  objitem.keywords.replace(re, '<span class="key">'+key +"</span>");
							
							string += '<a   target="_blank" href="'+host+objitem.link  +'">'+ name + '</a><br>';
						});
						$("#category").html(string);
						
						
					}else{
						$("#category").html('无结果');
						
					}
					
					//cms页面匹配
					if(obj.cms !='[]'){
						var cms  =$.parseJSON(obj.cms);
						var string =  '';//拼接热搜词
					
						$.each(cms,function(index,objitem,array){
							
							var re =new RegExp( key ,"gi"); //自定义变量正则	
							var name =  objitem.meta_title.replace(re, '<span class="key">'+key +"</span>");
							
							string += '<a target="_blank"  href="'+host+objitem.url  +'">'+ name + '</a><br>';
						});
						$("#cms").html(string);
						
						
						
					}else{
						
						$("#cms").html('无结果');
					}
					
					
					
					//tag页面匹配
					if(obj.tag !='[]'){
						
						var tag  =$.parseJSON(obj.tag);
						var string =  '';//拼接热搜词
					
						$.each(tag,function(index,objitem,array){
							var re =new RegExp( key ,"gi"); //自定义变量正则	
							var name =  objitem.name.replace(re, '<span class="key">'+key +"</span>");
							
							string += '<a target="_blank" href="'+host+objitem.url  +'">'+ name + '</a><br>';
						});
						$("#tag").html(string);
						
						
					}else{
						
						$("#tag").html('无结果');
					}
					
					
					//产品页面匹配
					if(obj.product !='[]' || obj.product != null){
						var product  =$.parseJSON(obj.product);
						var string =  '';//拼接热搜词
					
						$.each(product,function(index,objitem,array){
							var re =new RegExp( key ,"gi"); //自定义变量正则	
							var name =  objitem.name.replace(re, '<span class="key">'+key +"</span>");
							
							string += '<a target="_blank"  href="'+host+objitem.url  +'.html">'+ name + '</a><br>';
						});
						$("#product").html(string);
						
						
						
					}else{
						
						$("#product").html('无结果');
					}
					});
				
				
			}
		</script>
	</body>
</html>